<template>
  <div style="position: relative"
       @mouseout="handleBlur"
       @click="handFocus">
    <el-input v-model.trim="name"
              v-bind="$attrs"
              clearable
              :maxlength="50"
              @input="handleInput"
              @focus="handFocus" />
    <div v-show="show"
         class="customerList"
         style="max-height: 200px; overflow: auto"
         @mouseover="handFocus"
         @mouseout="handleBlur">
      <ul>
        <template v-for="item in options">
          <li :key="item.customerId"
              @click="selectItem(item)">
            {{ item.name }}
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { customer } from "@/api/index";
export default {
  name: "SelectCustomer",
  props: {
    value: [String, Number]
  },
  data () {
    return {
      name: "",
      show: false,
      options: [],
      optionsData: [],
      pagination: {
        size: 9999,
        page: 1,
        status: 1,
        customerTypes: [0, 2]
      }
    };
  },
  computed: {
    defaultValue () {
      this.name = this.value;
      return this.value;
    }
  },
  watch: {
    defaultValue: {
      handler (val) {
        this.name = val;
      }
    }
  },
  created () {
    this.getList();
  },
  methods: {
    // 选择客户
    selectItem (item) {
      this.name = item.name;
      this.$emit("input", item);
      this.show = false;
    },
    handFocus () {
      if (this.options.length > 0) {
        this.show = true;
        this.handleInput(this.name);
      }
    },
    async getList () {
      // this.pagination.customerName = this.name
      let { code, data } = await customer.search(this.pagination);
      if (code !== 0 || !data) return;
      this.optionsData = data.records;
      this.options = data.records.filter((item) => {
        return item.name?.indexOf(this.name) > -1;
      });
    },
    handleBlur () {
      this.show = false;
    },
    handleInput (value) {
      if (value.match(/\s/g, '')) {
        return;
      }
      if (!value) {
        this.options = this.optionsData;
      } else {
        this.options = this.optionsData.filter((item) => {
          return item.name?.indexOf(value) > -1;
        });
      }
      let nameArr = this.optionsData.filter((item) => {
        return item.name === value;
      });

      if (nameArr.length === 0) {
        this.$emit("input", value);
      } else {
        this.$emit("input", nameArr[0]);
      }
      if (this.options.length > 0) {
        this.show = true;
      }
    }
    // blurInput () {

    //   let nameArr = this.optionsData.filter(item => {
    //     return item.name === this.name
    //   })
    //   if (nameArr.length === 0) {

    //     this.$emit("input", this.name);
    //   }
    // }
  }
};
</script>

<style lang="scss">
.customerList {
  position: absolute;
  z-index: 2;
  background: var(--prev-bg-white);
  width: 100%;
  border: 1px solid var(--prev-border-color-grey);
  border-radius: 3px;
  ul {
    margin: 0;
    padding: 0;
    li {
      padding: 10px;
      list-style: none;
      &:hover {
        background: var(--prev-bg-grey);
        cursor: pointer;
      }
    }
  }
}
</style>
